<template>
  <div>
    <el-card>
      <div class="msg_main">
        <div class="top">
          <div class="top_text">
            留言板
          </div>
          <span>输入姓名：</span>
          <input id="input" type="text" v-model="user.name" placeholder="不超过6个字符">
          <el-button @click="submitMsg" size="small" round>留言</el-button>
          <el-input
            type="textarea"
            placeholder="请输入内容，留言区只显示最近的100条留言"
            v-model="user.msg"
            maxlength="200"
            show-word-limit
          >
          </el-input>
        </div>


        <div class="msg">
          <el-card shadow="hover" v-for="(msg,i) in userlist" :key="i">
            <h4>{{msg.name}}</h4>
            <i>{{msg.date}}</i>
            <div class="msgText">{{msg.msg}}</div>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name:"Msg",
  data(){
    return {
      user:{
        name:"",
        date:"",
        msg:"",
      },
      userlist:[],
      isSub:true,
    }
  },
  methods:{
    async getuserMsg(){
      const {data} = await this.$axios.post("/user",{name:"nihao1"});
      this.userlist = data;
    },
    async submitMsg(){
      if( this.user.name.length == 0 || this.user.name.length > 6 || this.user.msg.length == 0 || this.user.msg.length > 200){
        this.$message.error("请检查留言格式");
        return;
      }

      if(this.isSub){

      function timestampToTime(timestamp) {
        var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '.';
        var M = ((date.getMonth() + 1) < 10) ? ('0' + (date.getMonth() + 1) + '.') : ((date.getMonth() + 1) + '.');
        var D = (date.getDate() < 10) ? ('0' + date.getDate() + ' ') : (date.getDate() + ' ');
        var h = (date.getHours() < 10) ? ('0' + date.getHours() + ':') : (date.getHours() + ':');
        var m = (date.getMinutes() < 10) ? ('0' + date.getMinutes() + ':') : (date.getMinutes() + ':');
        var s = (date.getSeconds() < 10) ? ('0' + date.getSeconds()) : (date.getSeconds());
        return Y + M + D + h + m + s; 
      }

      var date = timestampToTime(new Date().getTime())
      this.user.date = date;
      console.log(this.user);
      const data = await this.$axios.post("/sub",this.user)
      console.log(data);
      
      this.isSub = false
      setTimeout(() => {
        this.isSub = true
      }, 10000);
      this.$message.success("留言成功")
      this.user = {
        name:"",
        date:"",
        msg:"",
      }
      this.getuserMsg()
      }else{
        this.$message.error("10秒只能留言一次")
      }
    }
  },
  created(){
    this.getuserMsg();
  }
}
</script>

<style lang="less" scoped>
.msg_main{
  height: 732px;
  .top{
    width: 100%;
    height: 20px;
    .top_text{
      width: 100%;
      text-align: center;
      font-size: 22px;
      font-weight: 400;
      margin-bottom: 15px;
    }
    span{
      margin-left: 10px;
    }
    #input{
      display: inline-block;
      height: 30px;
      width: 160px;
      margin: 0;
      margin-bottom: 20px;
    }
    .el-button{
      margin-left: 15px;
      position: relative;
      top: -2px;
    }
  }
  .msg{
    // background-color: red;
    height: 600px;
    margin-top: 50px;
    overflow: auto;
    i{
      font-size: 12px;
      color: rgb(141, 141, 141);
    }
    .msgText{
      font-size: 14px;
      word-wrap:break-word; //强制换行
    }
  }
}
</style>
